<?php
@session_start();
?>
<!DOCTYPE html>
<html>
  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>Oni -  Nuevo Evento </title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" />
    <link rel="stylesheet" type="text/css" href="js/jqtransform/jqtransform.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" />
    <link rel="stylesheet" type="text/css" href="css/home/home.css" />
    <link rel="stylesheet" type="text/css" href="css/home/nuevo.css" />

    <script src="js/modernizr.js"></script>
  </head>
  <body>
  <header></header>
  <div id="main_wrapper">


    <?php require_once 'header.php'; ?>

    <div id="ballons_float_left"></div>
    <div id="flag_overlay"></div>

    <div id="main_content">

      <div id="panel_add">
        <form action="" class="jqtransform" id="send_inv">
          <div id="title_label">Título de la Celebración</div>
          <input type="text" id="title_input_form" class="input_form" name="title">
          <br />
          <div id="goal_wrap">
            <label for="goal_drop">Meta de ayuda $</label>
            <select name="goal_drop" id="goal_drop" class="select_input_form">
              <option value="1500">$1,500</option>
              <option value="1000">$1,000</option>
              <option value="500">$500</option>
              <option value="100">$100</option>
            </select>
          </div>
          <div class="total_container">
            <div class="quantity_cont" id="q_goal">
              <a class="red_container" id="money">$1500</a>
              <p>Meta</p>
              <div class="equal_sign" id="first_sign"></div>
            </div>
            <div class="quantity_cont" id="q_nut">
              <a class="red_container" id="quantity">428</a>
              <a class="nutrioni_logo"></a>

              <div class="equal_sign"></div>
            </div>
            <div class="quantity_cont" id="q_kids">
              <a class="red_container" id="kids">18</a>
              <p>Niños alimentados por UN MES</p>
            </div>

          </div>
          <label for="date_day">Fecha del evento</label>
          <select name="date_day" id="date_day" class="date_display">
            <option value="01">01</option>
            <option value="02">02</option>
            <option value="03">03</option>
            <option value="04">04</option>
            <option value="05">05</option>
            <option value="06">06</option>
            <option value="07">07</option>
            <option value="08">08</option>
            <option value="09">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
          </select>
          <select name="date_month" id="date_month" class="date_display" >
            <option value="01">Enero</option>
            <option value="02">Febrero</option>
            <option value="03">Marzo</option>
            <option value="04">Abril</option>
            <option value="05">Mayo</option>
            <option value="06">Junio</option>
            <option value="07">Julio</option>
            <option value="08">Agosto</option>
            <option value="09">Septiembre</option>
            <option value="10">Octubre</option>
            <option value="11">Noviembre</option>
            <option value="12">Diciembre</option>
          </select>
          <select name="date_year" id="date_year" class="date_display">
            <option value="2012">2012</option>
            <option value="2013">2013</option>
          </select>
          <br/>
          <br/>

          <label id="label_msj" for="msj_input">Mensaje de invitación para tus amigos:</label>
          <textarea name="msj_input" id="msj_input" rows="4" cols="20" class="jqtransformdone">
          </textarea>
        </form>
        <div id="right_side_pan">
          <div class="friend_lists"></div>
          <div id="friends_panel">
            <?php
            ?>

            <div class="fb_friend_display" data-uid="<?php echo $_SESSION['fb_id']; ?>"
                 data-uname="<?php echo $_SESSION['fb_name']; ?>" >
              <div class="over_frame"></div><a>
                <img width="41px" height="41px" alt="<?php echo $_SESSION['fb_name']; ?>"  src="https://graph.facebook.com/<?php echo $_SESSION['user_name']; ?>/picture" />
              </a>

            </div>
<?php ?>

          </div>
          <div id="add_btn_friend"></div>



        </div>


      </div><!--end #panel_add  !-->
      <div id="ballons_float_right"></div>
      <div id="close_form">
        <div id="display_img"></div>
        <a href="javascript:;"  id="send_invite_btn"></a>
        <div id="close_banner">Todos podemos cambiar el mundo.</div>
      </div>


    </div><!-- END #main_content  -->


  </div> <!-- END #main_wrapper  -->

  <div id="lightbox_wrap" style="display: none">
    <div id="lightbox_container">

      <p id="message">Se creo el evento</p>
      <a href="javascript:;" id="btn_add_lightbox"></a>
      <a href="javascript:;" id="btn_close_lightbox"></a>
    </div>

  </div>
  <div id="lightbox_wrap_fail" style="display: none">
    <div id="lightbox_container">

      No se pudo crear el evento
      <a href="javascript:;" id="btn_add_lightbox"></a>
      <a href="javascript:;" id="btn_close_lightbox"></a>
    </div>

  </div>
  <div id="lightbox_wrap_add_friends">
    <div id="lightbox_container">
      <div id="list_header"></div>
      <div id="friends_list">
        <div id="friends_panel">
          <form id="form_friends_add">
<?php
            $friends = $_SESSION['fb_friends'];
            #$friends = array_slice($friends1, 0,10);

            foreach ($friends['data'] as $friend) {
?>

              <div class="fb_friend_display" data-uid="<?php echo $friend['id']; ?>"
                    ><div class="over_frame">
                </div>
                <a>
                  <img width="41px" height="41px" alt="<?php echo $friend['name']; ?>"
                       src="<?php echo $friend['picture']['data']['url']; #->data->url;        ?>" />
                </a>
                <a class="fb_name_holder"><label class="friend_name" for="add_friend"><?php echo $friend['name']; ?></label>
                  <input type="checkbox" name="add_friend" value="<?php echo $friend['id']; ?>" data-uname="<?php echo $friend['name']; ?>" id="check-<?php echo $friend['id']; ?>" class="checkbox_friend">
                </a>


              </div>
<?php } ?>
          </form>
        </div>

      </div>
      <div class="clear_fix"></div>
      <a href="javascript:;" id="btn_add_lightbox"></a>
      <a href="javascript:;" id="btn_close_lightbox"></a>
    </div>

  </div>

  <footer></footer>
  <script src="js/jquery-1.7.2.min.js"></script>
  <script src="js/jquery.fancybox.js"></script>
  <script src="js/jqtransform/jquery.jqtransform.js"></script>
  <script src="js/home/home.js"></script>
  <script src="js/jquery-ui-1.8.23.custom.min.js"></script>
  <script src="js/jquery.mousewheel.min.js"></script>
  <script src="js/jquery.mCustomScrollbar.min.js"></script>
  <script src="js/home/nuevo_evento.js"></script>
</body>
</html>
